<!--
    调用方法: <cascaderModel v-model="data" @change="change" />
    data: {
        otherKey: 1,
        modelName: 'consume',
        type: 'product',
        className: 'x'
    }
-->

<template>
  <Cascader class="cascaderModel" v-model="editValue" @on-change="change($event)" :data="modelTree" />
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "cascaderModel",
  data(){
    return {
        editValue: []
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    change(val) {
        if (val && val.length) {
            this.value.modelName = val[0]
            this.value.type = val[1]
            this.value.className = val[2]
        }
        else {
            this.value.modelName = ''
            this.value.type = ''
            this.value.className = ''
        }
        this.$emit('change', this.value)
    }
  },
  watch: {
      value: {
          handler(val) {
            if (this.value.modelName) {
                this.editValue = [this.value.modelName, this.value.type, this.value.className]
            } else {
                this.editValue = []
            }
          },
          immediate: true,
          deep: true
      }
  },
  props: {
    value: {
        default() {
            return {}
        }
    },
  },
  computed:{
    ...mapState('admin/model',[
        'modelTree',
    ]),
  },
}
</script>

<style scoped lang="less"></style>
